<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="apple-themes-web-app-capable" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="format-detection" content="telephone=no">
    <title>Introdução da função</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
    <link rel="stylesheet" type="text/css" href="css/about.css"/>
    <style type="text/css">
        body {
            margin: 0;
            font-family: 'Microsoft YaHei', sans-serif; /* Use a traditional Chinese font */
            background-color: #F8F8F8; /* Light gray background */
            color: #333; /* Dark gray text color */
            line-height: 1.6;
        }
        .top-bar {
            background-color: #FFD700; /* Gold color for the top bar */
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            width: 100%;
            top: 0;
            z-index: 1000;
        }

        .top-bar a {
            color: #333; /* Dark gray text color */
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        .return {
            width: 20px;
            height: 20px;
            display: inline-block;
            background-repeat: no-repeat;
            background-image: url("./images/return.png");
            margin-right: 5px;
        }
    </style>
</head>

<body>
<!--页面加载 结束-->
<div class="top-bar">
    <a href="javascript:history.back()">
        <i class="return"></i> retorno  <p style="margin-left: 63px">Introdução da função</p>
    </a>
</div>

<div class="about_box" style="margin-top: 5px">
    <div class="function_box">
        <p>Você pode aprender Xi e completar auto-testes neste aplicativo para melhorar suas habilidades e aprender mais sobre o Ano Novo Chinês.</p>
        <ul>
            <li style="background-image: url('./images/20240103173739.png');background-repeat: no-repeat;height: 431px;width: 200px"></li>
            <li style="margin-left: 2%;background-image: url('./images/20240103173754.png');background-repeat: no-repeat;height: 431px;width: 197px"></li>
        </ul>
    </div>
</div>

<!--底部结束-->
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/carousel-image.js"></script>
<script>
    $('.carousel-image').CarouselImage({
        num: $('.carousel-image .carousel-num'),
        repeat: true
    });
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</body>

</html>
